<template>
  <div>
    <!-- 组件需要的值就是一个字符串 所以这里传值并不需要使用v-bind -->
    <!-- <el-tooltip :content="content" placement="top">
      <el-button :type="type" :size="size" :icon="icon">{{ content }}</el-button>
    </el-tooltip> -->
    <h2>$attrs的用法</h2>
    <el-tooltip :content="content" placement="top">
      <!-- 使用 实例身上的 $attrs可以获取到由父组件传递给子组件所以的属性 -->
      <!-- 我们也不需要一个个通过 对象. 的形式来绑定 -->
      <!-- 固定写法 : v-bind="$attrs" 来全部绑定 -->
      <!-- 注意: 这里的 v-bind 不能简写 -->
      <el-button v-bind="$attrs">{{ content }}</el-button>
    </el-tooltip>

    <h2>$listeners的用法</h2>
    <el-tooltip :content="content" placement="top">
      <!-- 使用 实例身上的 $listeners 可以获取到由父组件传递给子组件的所有自定义事件 -->
      <!-- 固定写法 : v-on="$listeners" 来全部绑定 -->
      <!-- 注意: 这里的 v-on 不能简写 -->
      <el-button v-bind="$attrs" v-on="$listeners">{{ content }}</el-button>
    </el-tooltip>
  </div>
</template>

<script>
export default {
  name: 'HintButton',
  // 已经使用props接收完的数据在 $sttrs 中拿不到
  props: ['content'],
  mounted() {
    // 在这个函数中存储的是父组件传递给子组件全部的属性值
    // 1. $attrs
    //      所有绑定在组件标签上的属性都可以通过 $attrs 拿到,除了 style 和 class 和 props 已近接收过的属性
    //      console.log(this.$attrs)
    //      这里使用 v-bind="$attrs"  可以把接到的所有属性都绑定到当前组件上
    //      注意: 这里的 v-bind 不能简写
    // 2. $listeners
    //      所有绑定在组件标签上的事件都可以通过 $listeners 拿到
    //      这里使用 v-on="$listeners" 可以把接收到的所有事件都绑定到当前组件上
    //      注意: 这里的 v-on 不能简写
    // console.log(this.$listeners)
  }
}
</script>

<style scoped></style>
